<template>
    <div class="container">
        <el-container>
            <el-aside class="aside" :style="{'width': ( isCollapse ? '64px':'250px')}">
                <el-container>
                    <el-header class="logo-warp">
                        <transition name="el-zoom-in-center">
                            <div :class="[isCollapse ? 'q-logo-collapse logo':'logo']">
                                <img src="../../assets/logo.png" @click="toggleMenu"><span :class="[isCollapse ? 'hidden':'']" >Circle综合管理后台</span>
                            </div>
                        </transition>
                    </el-header>
                    <el-main class="q-menu">
                        <left-nav :isCollapse="isCollapse" :menuData="childrenData" ></left-nav>
                    </el-main>
                </el-container>
            </el-aside>
            <el-container>
                <el-header class="header">
                    <topMenu class="top-menu" :menuData="menu" v-on:childrenData="handlechildrenData"></topMenu>
                    <topUser class="user"></topUser>
                </el-header>
                <el-main class="main-warp">
                    <div class="main">
                        <div class="closeBtn">
                            <el-dropdown split-button  >
                                <i class="el-icon-error"></i>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>黄金糕</el-dropdown-item>
                                    <el-dropdown-item>狮子头</el-dropdown-item>
                                    <el-dropdown-item>螺蛳粉</el-dropdown-item>
                                    <el-dropdown-item>双皮奶</el-dropdown-item>
                                    <el-dropdown-item>蚵仔煎</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <tab-panel></tab-panel>

                    </div>
                </el-main>
                <el-footer class="footer">Footer</el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    import TopMenu from '@/components/TopMenu';
    import topUser from '@/components/TopUser';
    import LeftNav from '@/components/NavMenu';
    import TabPanel from '@/components/TabPanel';
    export default {
        name: "layout",
        components:{TopMenu,topUser,LeftNav,TabPanel},
        data () {
            return {
                isCollapse:false,
                editableTabsValue: 'home',
                editableTabs: [{
                    title: '首页',
                    name: 'home',
                    content: '这是首页',
                    close:false
                }],
                tabIndex: 2,
                childrenData:[],
                menu:null
            }
        },
        beforeCreate: function() {

        },
        created: function() {
           

        },
        beforeMount: function() {
            console.log('------beforeMount挂载前状态------');

        },
        mounted(){
            this.getMenuData();
            
        },
        beforeUpdate: function () {
            console.log('beforeUpdate 更新前状态===============》');

        },
        updated: function () {
            console.log('updated 更新完成状态===============》');

        },
        beforeDestroy: function () {
            console.log('beforeDestroy 销毁前状态===============》');

        },
        destroyed: function () {
            console.log('destroyed 销毁完成状态===============》');

        },
        computed: {
            activeTabName: {
                get() {
                    return this.$store.state.navTabs.activeTabName;
                },
                set(value) {
                    this.$store.commit("navTabs/setActiveTabName", value);
                }
            },
            ...mapState('navTabs',[
                'tabList'
            ])
        },
        methods: {
            ...mapMutations('navTabs',[
                'closeTab'
            ]),
            async getMenuData(){
                this.axios.get('/api/v1/menu').then((response) => {
                    this.menu = response.data.data;
                    let data = this.menu;
                    this.childrenData = data[0].children
                    sessionStorage.setItem('allMenuData',JSON.stringify(data));
                })
            },
            toggleMenu:function(){
                this.isCollapse = !this.isCollapse;
            },
            handlechildrenData:function(data){
                this.childrenData = data;
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            }
        }
    }
</script>

<style lang="less">
    .hidden {
        display: none;
    }
    .flex{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }

    .flex-justify{
        -webkit-box-align: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    .flex-align{
        -webkit-align-items:center;
        align-items:center;
    }
    .flex-center{
        display: flex;
        display: -webkit-flex;
        align-items:center;
        justify-content:center;
    }
    .el-menu.el-menu--horizontal {
        border-bottom: none;
    }

    .el-tabs__nav-next {
        right: 5px !important;
    }

    .el-tabs__nav-prev {
        left: 5px !important;
    }
    .q-menu-collapse .logo{

    }
    .aside {
        z-index: 9;
    }
    .logo-warp{
        padding: 0 !important;
        .logo {
            .flex-center;
            height: 59px;
            font-size: 14px;
            font-weight: bold;
            background-color: #5786E7;
            color: #fff;
            img {
                width: 60%;
            }
            &:not(.q-logo-collapse) {
                img {
                    width: auto;
                    height: 70%;
                }
            }
        }
    }

    .q-menu {
        padding: 0 !important;
        height: 100%;
    }
    .header {
        .flex;
        .flex-justify;
        padding: 0 !important;
        border-bottom: 1px solid #e6e6e6;
        z-index: 8;
        .top-menu{
            width: calc(100% - 400px);
            overflow: hidden;
        }
        .user{
            .q-drop {
                height: 60px;
                line-height: 60px;
                color: #909399;
                padding: 0 15px;
                border-left: 1px solid #e6e6e6;
                .q-avatar {
                    position: relative;
                    top: 8px;
                    &.q-user{
                        margin: 0 5px 0 0;
                    }
                }
            }
        }
    }
    .main-warp {
        display: flex;
        background-color: #f6f6f6;
        padding: 0 !important;
        overflow: hidden;
        .main {
            height: 100%;
            width: 100%;
            .tabs{
                height: 100%;
                border: none;
                overflow-y: auto;
                &>.el-tabs__header{
                    width: calc(100% - 82px);
                }
            }
            .closeBtn{
                position: absolute;
                z-index: 5;
                right: 0;
                .el-button{
                    border-radius: 0 !important;
                    border-top:none;
                    border-right: none;
                    border-color: #e6e6e6;
                }
            }
        }
    }
    .footer{
        border-top: 1px solid #e6e6e6;
        height: 44px !important;
        line-height: 44px;
    }
</style>